<template>
  <div class="">
    <el-table
      :data="dataList"
      row-key="routerId"
      border
      v-loading="listLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column
        prop="routerId"
        header-align="center"
        align="center"
        label="id">
      </el-table-column>
      <el-table-column
        prop="meta.title"
        header-align="center"
        align="center"
        label="标题名">
      </el-table-column>
      <el-table-column
        prop="path"
        header-align="center"
        align="center"
        label="url访问路径">
      </el-table-column>
      <el-table-column
        prop="name"
        header-align="center"
        align="center"
        label="name">
      </el-table-column>

      <el-table-column
        prop="permission"
        header-align="center"
        align="center"
        label="权限标识">
      </el-table-column>
      <el-table-column
        prop="component"
        header-align="center"
        align="center"
        label="组件名">
      </el-table-column>
      <el-table-column
        prop="componentPath"
        header-align="center"
        align="center"
        label="组件对应路径">
      </el-table-column>
      <el-table-column
        prop="isLock"
        header-align="center"
        align="center"
        label="是否锁定">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isLock" size="small" type="danger">锁定</el-tag>
          <el-tag v-else size="small" type="success">正常</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="cache"
        header-align="center"
        align="center"
        label="是否缓存">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.cache" size="small" type="success">缓存</el-tag>
          <el-tag v-else size="small" type="info">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="remark"
        header-align="center"
        align="center"
        label="备注">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addOrUpdateClick(scope.row.routerId)">修改</el-button>
          <el-button type="text" size="small" @click="deleteHandle(scope.row.routerId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗, 新增 / 修改 -->
    <update v-if="updateVisible" ref="addOrUpdate"
            v-bind:isUpdate="true" @refreshDataList="needDataList"></update>
  </div>
</template>

<script>
import Update from './userrouter-add-or-update'
import { reqDelete } from '@api/userrouter.api.fetch'
import util from '@/libs/util.js'
export default {
  props: {
    dataList: Array,
    listLoading: Boolean
  },
  data () {
    return {
      dataListSelections: [],
      updateVisible: false,
      uuid: ''
    }
  },
  mounted () {
    this.uuid = util.cookies.get('uuid')
    console.log(this.dataList)
  },
  components: {
    Update
  },
  watch: {
    // 如果 `dataListSelections` 多选项发生改变，这个函数就会运行
    dataListSelections: function () {
      this.$emit('dataListSelections', this.dataListSelections.length)
    }
  },
  methods: {
    // 获取数据列表
    needDataList () {
      this.$emit('needDataList')
    },
    // 多选
    selectionChangeHandle (val) {
      this.dataListSelections = val
    },
    // 新增 / 修改
    addOrUpdateClick (id) {
      this.updateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 删除
    deleteHandle (id) {
      var ids = id ? [id] : this.dataListSelections.map(item => {
        return item.routerId
      })
      this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        reqDelete(ids)
          .then(data => {
            if (data) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.needDataList()
                }
              })
            } else {
              this.$message.error(data.message)
            }
          })
      })
    }
  }
}
</script>
